<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
</head>
<body>
<div>
    <input v-model="username" type="text" placeholder="请输入姓名"> <br>
    <input v-model="userage" type="text" placeholder="请输入年龄"> <br>
    <button @click="push()">提交</button>
    <button @click="reset()">重置</button>
    <br>
    姓名: {{username}} <br>年龄:{{userage}}
</div>
<hr>
<table border="1">
    <caption>留言板</caption>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    <tr v-for="item in mydata">
        <td>{{$index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td @click="delete($index)">删除</td>
    </tr>
    <tr>
        <td colspan="4"  v-show="mydata.length==0 ">
            <p>暂无数据.....</p>
        </td>

    </tr>
    <tr>
        <td colspan="4" v-show="mydata.length>0">
            <button @click="deleteAll()">全部删除</button>
        </td>

    </tr>
</table>
</body>
</html>
<script src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: 'body',
        data: {

            mydata: [],
            username: '',
            userage: '',
        },
        methods: {
            push:function () {
                this.mydata.push({
                    name:this.username,
                    age:this.userage
                });
                this.username='';
                this.userage='';
            },
            reset:function () {
                this.username='';
                this.userage='';
            },
            delete:function (n) {
               this.mydata.splice(n,1);
            },
            deleteAll:function () {
                this.mydata=[];
            }
        }
    })

</script>